<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport"
    content="width=device-width, initial-scale=1, maximum-scale=1,minimum-scale=1, user-scalable=no" />
  <title>首页</title>
  <!-- <link rel="shortcut icon" href="./favicon.ico" type="image/x-icon" /> -->
</head>
<style>
  video {
    /* display: none; */
  }
</style>

<body><canvas id="canvas" width="450" height="800"></canvas>
  <video src="./mp4/视频.mp4" width="520" height="800" controls></video>
</body>
<script>
  // 获取视频
  let video = document.querySelector('video')
  // 找到画布
  let canvas = document.querySelector("#canvas");
  // 获取画笔
  let ctx = canvas.getContext("2d");

  let id = null
  let v_x = null
  let v_y = null
  let time = null
  let steps = 450
  let time_steps = null
  video.onplay = function () {
    time = setInterval(() => {
      v_x = Math.ceil(Math.random() * 800);
      v_y = Math.ceil(Math.random() * 800);
    }, 3000)
    time_steps = setInterval(() => {
      steps -= 10
      if (steps === 0) {
        steps = 450
      }
      ctx.fillText('我是弹幕', steps, 100)
      ctx.strokeStyle = "#f00";
    }, 3000)

    id = setInterval(() => {
      // clearRect(偏移量x,偏移量y,宽度,高度)
      // fillRect(偏移量x,偏移量y,宽,高)
      // strokeStyle = 单色 || 渐变 || 用于创建 pattern 笔触的 pattern 对象。
      // strokeText (文字,偏移量x,偏移量y,可选。允许的最大文本宽度，以像素计。)
      ctx.clearRect(0, 0, 450, 800)
      ctx.fillRect(0, 0, 800, 600)
      ctx.drawImage(video, 0, 0, 450, 800)
      ctx.font = '16px 微软雅黑'
      ctx.strokeStyle = '#0f0'
      ctx.strokeText('打码', v_x, v_y)

    }, 32)

  }
  video.onpause = function () {
    clearInterval(id)
    clearInterval(time)
    clearInterval(time_steps)
  }
</script>

</html>